@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('/static/fonts/Inter-Thin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url('/static/fonts/Inter-ThinItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/static/fonts/Inter-ExtraLight.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url('/static/fonts/Inter-ExtraLightItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/static/fonts/Inter-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/static/fonts/Inter-LightItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/Inter-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/Inter-MediumItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/Inter-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/Inter-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/static/fonts/Inter-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url('/static/fonts/Inter-ExtraBoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/static/fonts/Inter-Black.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url('/static/fonts/Inter-BlackItalic.woff2') format('woff2');
}

html {
    font-family: 'Inter', sans-serif;
}
/* @supports (font-variation-settings: normal) {
    html {
        font-family: 'Inter var', sans-serif;
    }
} */

* {
    box-sizing: border-box;
}

:root {
    --color-contrast: #2a9d8f;
    --color-font-contrast: #fcfcfc;
    --color-contrast-second: #577590;
    --color-background: #fcfcfc;
    --color-font: #232323;
    --color-dark: #030303;
    --color-success: #43aa8b;
    --color-error: #f94144;
    --border-radius: 10px;
    --margin-basic: 10px;
}

@layer base {
    html {
        @apply font-sans bg-gray-900 text-gray-100;
    }
}

@layer components {
    .btn {
        @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
    }

    .btn-primary {
        @apply btn bg-hemmelig text-white hover:bg-hemmelig-700;
    }

    .btn-danger {
        @apply btn bg-red-500 text-white hover:bg-red-600;
    }
}
